
<style lang="scss" scoped>
	.header {
		width: 100%;
		border-bottom: 1px solid #dee2ee;
		background-color: white;
		padding: 0 30rpx;
		height: 100rpx;

		.date2 {
			width: 400rpx;
			height: 100rpx;
			padding: 0 30rpx;

			.sbtn {
				width: 40rpx;
				height: 40rpx;
				background: #dee2ee;
				border-radius: 8rpx;
				color: #879bba;
			}
		}

		.rbtn {
			width: 136rpx;
			height: 44rpx;
			background: #f5f7fa;
			border-radius: 22rpx;
		}
	}

	.line {
		height: 100rpx;
		padding: 0 30rpx;
		color: #409EFF;
		font-size: 28rpx;
		background-color: white;
		border-bottom: 1px solid #dee2ee;

		.sbtn {
			width: 212rpx;
			height: 64rpx;
			background: #fffefe;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;

		}
	}

	.table {
		width: 100%;
		height:calc(100vh - 200rpx);


		.left {
			background-color: white;
			height:calc(100vh - 200rpx);
			width: 344rpx;
		}

		.right {
			background-color: white;
			height:calc(100vh - 200rpx);

			width: 405rpx;
		}

		.th {
			height:calc(100vh - 200rpx);
		}

		.row {
			height:calc(100vh - 200rpx);
			display: flex;
			flex-direction: column;

		}

		.dd1 {
			width: 172rpx;
			height: 62rpx;
			border-right: 1rpx solid #dee2ee;
			border-bottom: 1rpx solid #dee2ee;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
		}

		.dd {
			width: 172rpx;
			height: 172rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10rpx;
			border-right: 1px solid #dee2ee;
			border-bottom: 1px solid #dee2ee;
			position: relative;
		}

		.num {
			font-size: 24rpx;
			color: #98A5B3;
		}

		.dutyType {
			width: 152rpx;
			height: 44rpx;
			border-radius: 8rpx;
			margin-top: 10rpx;
		}

		.nowday {
			width: 28rpx;
			height: 28rpx;
			background: #409eff;
			border-radius: 50%;
			position: absolute;
			top: 10%;
			left: 10rpx;
		}
	}
</style>

<template>
	<view class="date">
		<view class="header between-flex">
			<view class="f28 blue" @click="getDate()">回到本周</view>
			<view class="date2 between-flex">
				<view class="sbtn center-flex" @click="pre()">
					<u-icon name="arrow-left"></u-icon>
				</view>
				<view @click="show=true">{{nowYear}}-{{nowMonth}}</view>
				<view class="sbtn center-flex" @click="next()">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="rbtn center-flex f24 c999" @click="showSheet=true">{{dutyType.dutyType}}
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="line between-flex">
			<view class="sbtn center-flex" @click="goMonth">
				查看月视图
			</view>
			<view class=" one textColor" style="max-width:450rpx;" v-if="dept">{{dept.value | subject}}

			</view>

		</view>

		<swiper style="height:calc(100vh - 200rpx);width:100%;" :current="current" :vertical="true" @change="change">

			<swiper-item v-for="(item,index) in week_list" :key="index">

				<view class="table flex">
					<view class="left flex">
						<view class="th flex">
							<view class="row td">
								<view class="dd1 "></view>
								<view class="dd" v-for="(item2,index2) in week" :key="index2">
									<view v-if="item[index2]&&item[index2].holidayTime">
										<view class="nowday center-flex cfff f20"
											v-if="item[index2].holidayTime.indexOf(today)!=-1">
											今
										</view>
									</view>

									<view class="">{{week[index2].name}}</view>
									<view class="num" v-if="item[index2]">

										{{item[index2].holidayTime.substring(5,10)}}
									</view>
									<view v-if="item[index2]" class="f24" style="color:#EBB917;">
										{{$getBackground(item[index2]).name}}
									</view>
								</view>
							</view>
							<view class="td row">
								<view class="dd1">我的</view>
								<view class="dd" v-for="item3,index3 in week" :key="index3"
									:style="{background:$getBackground(item[index3]).background}">
									<view v-if="dutyType.id==''||dutyType.id==info.rules"
										class="dutyType cfff f24 center-flex" :style={background:info.colorCode}
										v-for="info,i in item[index3].core" :key="i">
										{{info.dutyType}}
									</view>
								</view>
							</view>

						</view>
					</view>
					<scroll-view scroll-x="true" class="right" >
						<view class="th flex">

							<view class="td row" v-for="otheritem,otherindex in otherUser" :key="otherindex">
								<view class="dd1">{{otheritem.user | user}}</view>
								<view class="dd"  v-for="otheritem2,otherindex2 in week" :key="otherindex2"
									:style="{background:$getBackground(other_week_list[index][otherindex2]).background}">
									<view v-for="oinfo,oi in other_week_list[index][otherindex2].core" :key="oi"  >
										<view v-if="oinfo.users.indexOf(otheritem.user)!=-1">
											<view v-if="(dutyType.id==''||dutyType.id==oinfo.rules)"
												class="dutyType cfff f24 center-flex" :style="{background:oinfo.colorCode}">
												{{oinfo.dutyType}}
												
											</view>
										</view>
										
									</view>

								</view>
							</view>


						</view>
					</scroll-view>

				</view>

			</swiper-item>

		</swiper>
		<u-picker v-model="show" :params="params" mode="time" @confirm="chooseDate"></u-picker>
		<u-action-sheet :list="sheetArr" @click="click" v-model="showSheet"></u-action-sheet>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				userId: this.$getUser().value,
				week: [{
						name: '星期一',
						key: 'Monday'
					},
					{
						name: '星期二',
						key: 'Tuesday'
					},
					{
						name: '星期三',
						key: 'Wednesday'
					},
					{
						name: '星期四',
						key: 'Thursday'
					},
					{
						name: '星期五',
						key: 'Friday'
					},
					{
						name: '星期六',
						key: 'Saturday'
					},
					{
						name: '星期天',
						key: 'Sunday'
					}
				],
				current: 0,
				today: '',
				nowYear: '',
				nowMonth: '',
				week_list: [], //自己的排班
				other_week_list: [], //其他人的排班
				dept: null,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				sheetArr: [{
						text: '转工单'
					},
					{
						text: '终止'
					}
				],
				showSheet: false,
				dutyType: {
					dutyType: '所有班',
					id: ''
				}, //值班类型
				otherUser: [],//其他用户
				scrollleft:0,
				newscrollleft:0

			}
		},

		onLoad() {
			this.dept = this.$getdept()
			this.today = this.getDate()
			this.getSheet()

		},
		methods: {
			
			goMonth() {
				uni.redirectTo({
					url: '/pagesA/arrange/arrangeMonth'
				})
			},
			click(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.sheetArr[index].text}`)
				this.dutyType = this.sheetArr[index]
			},
			chooseDate(e) {
				this.nowMonth = e.month
				this.nowYear = e.year
				this.current = 0
				this.init()
			},
			init() {
				this.$showloading()
				this.getMyDuty()
				this.getOtherDuty()
			},
			getMyDuty() { //获取自己的排班信息
			
				this.$pop.ajaxPost('/busSchedulCore/getMonthInfo', {
					month: `${this.nowYear}-${this.nowMonth}`,
					userId: this.userId
				}).then(res => {
					var list = res.body
					var week_list = [
						[]
					]
					list.forEach(item => {
						this.week.forEach((item2, index2) => {
							if (item2.key == item.week) {
								if (week_list[week_list.length - 1].length < 7) {
									week_list[week_list.length - 1][index2] = item
								} else {
									week_list.push([])
									week_list[week_list.length - 1][index2] = item
								}
							}
						})

					})
					console.log('week_list', week_list)

					this.week_list = week_list
					week_list.forEach((item, index) => {
						item.forEach(item2 => {
							if (item2.holidayTime.indexOf(this.today) != -1) {
								this.current = index
							}
						})
					})
					// uni.hideLoading()
				})
			},
			getOtherDuty() {
				this.$pop.ajaxPost('/busSchedulCore/getMonthInfo', {
					month: `${this.nowYear}-${this.nowMonth}`
				}).then(res => {
					var list = res.body
					var week_list = [
						[]
					]
					list.forEach(item => {
						item.core.forEach(temp=>{
							var users=[]
							temp.schedulUsers.forEach(user=>{
								user=user.user.split(',')
								user.forEach(i=>{
									users.push(i)
								})
								
							})
							temp.users=users
						})
						this.week.forEach((item2, index2) => {
							if (item2.key == item.week) {
								if (week_list[week_list.length - 1].length < 7) {
									week_list[week_list.length - 1][index2] = item
								} else {
									week_list.push([])
									week_list[week_list.length - 1][index2] = item
								}
							}
						})

					})
					
					for(let i=0;i<7;i++){
						console.log()
						if(!week_list[0][i]){
							week_list[0][i]={
								core:[]
							}
						}
						if(!week_list[week_list.length-1][i]){
							week_list[week_list.length-1][i]={
								core:[]
							}
						}
					}
					console.log('other_week_list', week_list)
					this.other_week_list = week_list

					let otherUser = [] //处理其他用户数据
					list.forEach(item => {
						item.core.forEach(item2 => { //排班人员
							item2.schedulUsers.forEach(item3 => { //
							let user=item3.user.split(',')
							user.forEach(i=>{
								if(i!=this.userId){ //不是用户自己
									var flag = true
									otherUser.forEach(item5 => {
										if (item5.user == i) {
											flag = false
										}
									})
									if (flag) {
										otherUser.push({
											user:i
										})
									}
								}
							})
								

							})
						})


					})

					console.log('otherUser', otherUser)
					this.otherUser = otherUser
					uni.hideLoading()
				})
			},
			pre() {
				let preMonth = Number(this.nowMonth) - 1;
				if (preMonth >= 1) {
					preMonth = preMonth
				} else {
					preMonth = 12;;
					this.nowYear = this.nowYear - 1;
				}


				preMonth < 10 ? preMonth = '0' + preMonth : '';
				this.nowMonth = preMonth
				this.current = 0
				this.init()

			},
			next() {
				let preMonth = Number(this.nowMonth) + 1;
				if (preMonth <= 12) {
					preMonth = preMonth
				} else {
					preMonth = 1;
					this.nowYear = this.nowYear + 1;
				}

				preMonth < 10 ? preMonth = '0' + preMonth : '';
				this.nowMonth = preMonth
				this.current = 0
				this.init()
			},
			getDate() { //获取今天
				var time = new Date().getTime()
				var date = new Date(time);
				this.dayIndex = date.getDay();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				var hour = date.getHours()
				var min = date.getMinutes()
				month < 10 ? month = '0' + month : ''
				strDate < 10 ? strDate = '0' + strDate : ''
				hour < 10 ? hour = '0' + hour : ''
				min < 10 ? min = '0' + min : ''
				this.nowMonth = month
				this.nowYear = date.getFullYear()
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
				this.init()
				return currentdate;
			},
			change(e) {
				this.current = e.detail.current
			},
			getSheet() {
				this.$pop.ajaxPost('/busSchedulRules/getList').then(res => {
					var list = res.body
					this.sheetArr = [{
						dutyType: '所有班',
						id: ''
					}]
					this.sheetArr = this.sheetArr.concat(list)
					this.sheetArr.forEach(item => {
						item.text = item.dutyType
					})
					this.dutyType = this.sheetArr[0]
					this.$forceUpdate()
					console.log(this.sheetArr)
				})
			}
		}
	}
</script>
